<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单一览</title>
    <th:block th:include="common.html :: source"></th:block>
    <link href="/static/layui/css/layui.css" rel="stylesheet"/>
</head>
<style>
    body{
        margin: 20px;
    }
</style>
<body>
<div style="" class="panel-head layui-anim layui-anim-down"><strong> 订单信息</strong></div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script src="/layui/layui.js" charset="UTF-8"></script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>

    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>


<script th:inline="none">
    layui.use(['table', 'laypage', 'form'], function(){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:'/merchant/orderMaster'
            , cellMinWidth: 80
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            , parseData: function (data) {
                return {
                    code: data.code,
                    msg: data.msg,
                    data: data.data,
                    count: data.count
                }
            }
            ,page: true
            , limit: 8
            , limits: [8, 16, 24, 32]
            ,title: '用户数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'orderId', title:'订单编号', width:180, fixed: 'left', sort: true}
                ,{field:'buyerName', title:'买家', width:80, fixed: 'left', sort: true}
                ,{field:'buyerPhone', title:'联系方式', width:120}
                ,{field:'buyerAddress', title:'送货地址', width:150,sort: true}
                // ,{field:'shoeId', title:'标签', width:100}
                ,{field:'shoeName', title:'商品名称',width:120}
                ,{field:'shoeQuantity', title:'数量', width:80}
                // ,{field:'shoeIcon', title:'图片', width:120}
                // ,{field:'specsId', title:'最近修改', width:120}
                ,{field:'specsNameColor', title:'颜色', width:80}
                ,{field:'specsNameSize', title:'尺码', width:80}
                ,{field:'specsPrice', title:'价格(/分)', width:90}
                ,{field:'orderAmount', title:'合计(/元)', width:90}
                ,{field:'payStatus', title:'支付状态', width:100,
                    templet: function (d) {
                        if (d.payStatus === 1) {
                            return '已支付'
                        } else {
                            return '未支付'
                        }
                    }}
                ,{field:'createTime', title:'创建时间', width:120}
                ,{field:'updateTime', title:'更新时间', width:100}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:170}
            ]]

        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;

            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除么',
                    {
                        offset: '200px'
                    },
                    function(index){
                        $.post({
                            url: "/merchant/delOrderMaster",
                            data: {
                                "id": data.orderId,
                            },
                            success: function (resp) {
                                if (resp === "true") {
                                    // obj.del();
                                    layer.close(index);
                                    location.reload();
                                } else {
                                    layer.close(index);
                                    layer.open({
                                        title: '温馨提示',
                                        content: '删除失败,请重试！'
                                    });
                                }
                            }
                        })
                    });
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 2
                    , title: "修改信息"
                    , area: ['45%', '78%']
                    , content: '/merchant/toUpdateOrderMaster',
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
                        body.find('#orderId').val(data.orderId);
                        body.find('#buyerName').val(data.buyerName);
                        body.find('#buyerPhone').val(data.buyerPhone);
                        body.find('#buyerAddress').val(data.buyerAddress);
                        body.find('#shoeId').val(data.shoeId);
                        body.find('#shoeName').val(data.shoeName);
                        body.find('#shoeQuantity').val(data.shoeQuantity);
                        body.find('#shoeIcon').val(data.shoeIcon);
                        body.find('#specsId').val(data.specsId);
                        body.find('#specsNameColor').val(data.specsNameColor);
                        body.find('#specsNameSize').val(data.specsNameSize);
                        body.find('#orderAmount').val(data.orderAmount);
                        body.find('#specsPrice').val(data.specsPrice);
                        body.find('#payStatus').val(data.payStatus);
                        body.find('#createTime').val(data.createTime);
                        body.find('#updateTime').val(data.updateTime);
                        //成员的职位回显
                        $.post({
                            url: "/merchant/orderMaster",
                            success: function (resp) {
                                iframeWin.layui.form.render("select");
                            }
                        })
                    }
                })
            }else if(obj.event === 'detail'){
                layer.open({
                    title: '信息',
                    area: ['30%', '70%'],
                    offset: 'auto',
                    content: 'ID: ' + data.orderId + '</br>'
                        + '买家: ' + data.buyerName + '</br>'
                        + '联系方式: ' + data.buyerPhone + '</br>'
                        + '地址: ' + data.buyerAddress + '</br>'
                        + '商品编号: ' + data.shoeId + '</br>'
                        + '商品名称: ' + data.shoeName + '</br>'
                        + '数量: ' + data.shoeQuantity + '</br>'
                        + '图片: ' + data.shoeIcon + '</br>'
                        + '规格名称: ' + data.specsId + '</br>'
                        + '颜色: ' + data.specsNameColor + '</br>'
                        + '尺码: ' + data.specsNameSize + '</br>'
                        + '商品价格: ' + data.specsPrice + '</br>'
                        + '总价: ' + data.orderAmount + '</br>'
                        + '支付状态: ' + data.payStatus + '</br>'
                        + '下单时间: ' + data.createTime + '</br>'
                        + '更新时间: ' + data.updateTime + '</br>'
                })
            }

        });
    });
</script>

</body>
</html>